<template>
  <div class="order-cell">
    <div class="order-cell-list">
      <div class="order-cell-list-left">
        <div class="img">
          <img :src="orderData.img">
        </div>
        <div class="info">
          <div class="title maxLine2">{{orderData.pdname}}</div>
          <div class="rules"> {{orderData.psname}}</div>
        </div>
      </div>
      <div class="order-cell-list-right">
        <div class="price">{{orderData.psprice | math-money}}</div>
        <div class="number"> ×{{orderData.detailrnumber}}</div>
      </div>
    </div>
    <div class="order-cell-dividing"></div>
  </div>
</template>
<style lang="stylus" scoped>
.order-cell {
  display: flex;
  flex-direction: column;

  .order-cell-list {
    display: flex;
    padding-top: 17px;
    padding-bottom: 25px;

    .order-cell-list-left {
      display: flex;

      .img {
        width: 132px;
        height: 132px;

        img {
          width: 132px;
          height: 132px;
        }
      }

      .info {
        margin-left: 21px;
        display: flex;
        flex-direction: column;
        font-size: 26px;
        color: rgba(51, 51, 51, 1);
        width: 386px;

        .rules {
          flex: 1;
          display: flex;
          align-items: flex-end;
        }
      }
    }

    .order-cell-list-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: flex-end;
      font-size: 26px;
      color: rgba(51, 51, 51, 1);

      .number {
        flex: 1;
        display: flex;
        align-items: flex-end;
      }
    }
  }

  .order-cell-dividing {
    width: 100%;
    height: 1.3px;
    background: RGBA(241, 241, 241, 1);
  }
}
</style>

<script>
import mixins from '@/mixins'
export default {
  name: 'order-cell',
  data () {
    return {
    }
  },
  props: {
    orderData: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  mixins: [mixins],
  methods: {
  },
  mounted () {
  },
  components: {
  }
}
</script>
